<template>
  <div class="reportForms">
    <!-- 上半部分 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar title="报表"></van-nav-bar>
      </div>
      <!-- 筛选菜单 -->
      <FilerBar></FilerBar>
      <!-- 账单面板 -->
      <div class="panel">
        <div class="panel-bar">
          <div class="panel-bar-expenses">
            <input type="radio">
            <label>月支出 <span class="expenses-text">￥51.75</span></label>
            </input>
          </div>
          <div class="panel-bar-income">
            <input type="radio">
            <label>月收入 <span class="income-text">￥0.00</span></label>
            </input>
          </div>
        </div>
        <div class="chart">
          <div class="chart-main">
            <!-- 图表 -->
            <div class="chartContainer" ref="chartContainer" style=""></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="main-b">
      <div class="bill-t">
        账单明细
      </div>
      <div class="bill-b">
        <MinBill />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ReportForms">
//报表
import { ref, onMounted } from 'vue'

import MinBill from '@/components/MinBill.vue'
import FilerBar from '@/components/FilerBar.vue'
// 导入echarts用于生成图表
import * as echarts from 'echarts';

// 图表数据
const chartContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(chartContainer.value, null, {
    height: 200
  })
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '谷子' },
          { value: 735, name: '餐饮' },
          { value: 580, name: '购物' },
          { value: 484, name: '图书' },
          { value: 300, name: '洗脚' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart.setOption(option);
})

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.reportForms{
  height: 100vh;
}

.main-t {
  background-color: @gabelBgColor;
  height: 300px;

  .panel {
    background-color: #fff;
    border-radius: 50px;
    padding: 30px;
    margin: @gabelMargin;
    margin-top: 0px;
    font-size: 48px;
    position: relative;

    .panel-bar {
      font-size: 30px;
      display: flex;
      justify-content: space-between;
    }

    .chart {
      margin: 5px 0;

      .chartContainer {
        margin: -30px 0;
      }
    }
  }
}

.main-b {
  height: 50%;
  font-size: 35px;
  margin: @gabelMargin;
  margin-top: 320px;
  .bill-t{
    padding-top: 10px;
    margin-bottom: 30px;
  }
}
</style>